<template>
  <div class="">
    <div class="info-head" style="padding: 10px 0 10px;">
      <span>{{ title }}</span>
    </div>
    <div class="info-content" style="padding-top: 10px">
      <div class="flex justify-between overview">
        <div
          class="overview-item"
          v-for="(item, index) in data"
          :key="index"
          :style="{ backgroundColor: themeColor }"
        >
          <h2 class="item-label">
            {{ item.energyName }}
            <small>{{ item.energyUnit ? `(${item.energyUnit})` : '' }}</small>
          </h2>
          <div class="item-main">
            <span class="item-number">{{ item.data | formatNumber }}</span>
          </div>
          <p class="item-content">
            <span>同比：</span>
            <span class="margin-left-auto" :class="{ 'color-red': item.yoy > 0, 'color-green': item.yoy < 0 }">{{ item.yoy }}%</span>
            <span v-if="item.yoy && item.yoy != '-'" :class="{ 'color-red': item.yoy > 0, 'color-green': item.yoy < 0 }">{{ item.yoy > 0 ? '↑' : '↓' }}</span>
          </p>
          <p class="item-content">
            <span>环比：</span>
            <span class="margin-left-auto" :class="{ 'color-red': item.mom > 0, 'color-green': item.mom < 0 }">{{ item.mom }}%</span>
            <span v-if="item.mom && item.mom != '-'" :class="{ 'color-red': item.mom > 0, 'color-green': item.mom < 0 }">{{ item.mom > 0 ? '↑' : '↓' }}</span>
          </p>
          <p class="item-content orange" style="justify-content: space-between;">
            <span>同比能耗：</span>
            <span>{{ item.dataYoy }}</span>
          </p>
          <p class="item-content orange" style="justify-content: space-between;">
            <span>环比能耗：</span>
            <span>{{ item.dataMom }}</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'grid-item-one',
  props: {
    title: String,
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    themeColor() {
      return this.$store.state.user.theme;
    }
  },
  filters: {
    formatNumber(value) {
      if (value === null || value === undefined || value === '') {
        return '--';
      }
      return Number(value) ? Number(value).toLocaleString() : '--';
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';
.overview {
  overflow: auto;
  gap: 15px;
}
.overview-item {
  font-size: 14px;
  flex: 1;
  border-radius: 4px;
  padding: 20px;
  min-width: 180px;
  color: white;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.item-label {
  font-size: 20px;
  font-weight: 500;
  margin-top: 0;
  margin-bottom: 1rem;
}
.item-main {
  margin-top: auto;
  margin-bottom: 1rem;
}
.item-number {
  font-size: 20px;
  color: gold;
  margin-right: 5px;
}

.item-icon {
  position: absolute;
  right: 20px;
  bottom: 10px;
  font-size: 3vw;
  color: white;
  opacity: 0.8;
}
.item-content {
  display: flex;
  align-items: center;
  margin: 0;
  line-height: 1.5;
  .color-green {
    color: #68ed6d;
    &:last-child {
      margin-left: 5px;
    }
  }
  .color-red {
    color: #ff776d;
    &:last-child {
      margin-left: 5px;
    }
  }
  &.orange {
    span:last-child {
      color: gold;
    }
  }
}
</style>
